<template>
	<view class="createOrder">
		<uni-forms :modelValue="formData" border>
			<uni-forms-item label="姓名">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入收件人姓名" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="收件地址">
				<uni-easyinput type="text" v-model="formData.address" placeholder="请输入收件地址" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput type="text" v-model="formData.remarks" placeholder="请输入备注" :inputBorder="false" />
			</uni-forms-item>

			<!-- 商品分组 -->
			<view class="cardWrap" v-for="(item,index) in formData.shopData" :key="item.id">
				<view class="deleteIcon">
					<uni-icons type="trash" size="20" @click="deleteCard(index)"></uni-icons>
				</view>
				<uni-group title="商品信息" mode="card">
					<uni-forms-item label="商品名称" style="position: relative;">
						<uni-easyinput type="text" v-model="item.name" placeholder="请输入商品名称" :inputBorder="false"
							@input="comboxInput(item)" />
						<view class="combox" v-if="item.showCombox">
							<view class="comboxItem" v-for="shop in item.shops" :key="shop.name"
								@click="chooseShop(shop,item)">
								{{shop.name}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="数量">
						<view class="toRight">
							<uni-number-box v-model="item.count" min="1" max="100000000"
								@change="numberBoxChange($event,item)">
							</uni-number-box>
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item label="价格">
						<uni-easyinput type="text" v-model="item.allPrice" :inputBorder="false" disabled />
					</uni-forms-item> -->
					<uni-forms-item label="外箱编码">
						<uni-easyinput type="text" v-model="item.caseCode" :inputBorder="false" disabled />
					</uni-forms-item>
					<uni-forms-item label="瓶盒编码">
						<uni-easyinput type="text" v-model="item.vaseCode" :inputBorder="false" disabled />
					</uni-forms-item>
				</uni-group>
			</view>
		</uni-forms>
		<!-- 悬浮按钮 -->
		<view style="padding-left: 42rpx;margin-top: 70rpx;">
			<uni-icons type="plus" size="24" @click="add"></uni-icons>
		</view>
		<!-- <uni-fab @fabClick="add"></uni-fab> -->
		<!-- 按钮 -->
		<view class="buttonWrap">
			<button type="primary" size="mini" @click="handleSubmit">提 交</button>
			<button size="mini" @click="handleCancel">取 消</button>
		</view>
	</view>
</template>

<script>
	let shopId = 0
	import throttle from "../../utils/throttle.js"
	export default {
		name: "CreateOrder",
		data() {
			return {
				formData: {
					name: "",
					phone: "",
					address: "",
					remarks: "",
					shopData: [{
						id: shopId,
						name: "",
						count: 1,
						price: 0,
						allPrice: 0,
						caseCode: "",
						vaseCode: "",
						showCombox: false,
						shops: []
					}],
				},
			}
		},
		methods: {
			// 添加
			add() {
				shopId++
				this.formData.shopData.push({
					id: shopId,
					name: "",
					count: 1,
					price: 0,
					allPrice: 0,
					caseCode: "",
					vaseCode: "",
					showCombox: false,
					shops: []
				})

				const query = uni.createSelectorQuery().in(this);
				query.select('.createOrder').boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.height,
						duration: 300
					});
				}).exec();
			},
			// 删除
			deleteCard(index) {
				uni.showModal({
					title: "提示",
					content: "确认删除吗？",
					success: (res) => {
						if (res.confirm) {
							this.formData.shopData.splice(index, 1)
						}
					}
				})
			},
			/* 商品选择搜索 */
			comboxInput: throttle(async function(item) {
				// 输入框为空
				if (!item.name) {
					item.name = ""
					item.count = 1
					item.price = 0
					item.allPrice = 0
					item.vaseCode = ""
					item.caseCode = ""
					item.showCombox = false
					return
				}
				try {
					const {
						data
					} = await this.request("createOrder/search", {
						keywords: item.name
					})

					item.shops = data.data

					if (item.shops.length >= 1) {
						item.showCombox = true
					}
				} catch (e) {
					console.log(e)
				}
			}, 500),
			chooseShop(shop, item) {
				console.log(shop)
				const {
					name,
					price,
					vaseCode,
					caseCode
				} = shop
				item.name = name
				item.price = price
				item.allPrice = price
				item.vaseCode = vaseCode
				item.caseCode = caseCode
				item.showCombox = false
			},
			/* 商品数量变更 */
			numberBoxChange(val, item) {
				item.allPrice = item.price * val
			},
			async handleSubmit() {
				if (!this.formData.name) {
					uni.showToast({
						icon: "none",
						title: "请输入收件人姓名"
					})
					return
				}
				if (!this.formData.phone) {
					uni.showToast({
						icon: "none",
						title: "请输入收件人手机号"
					})
					return
				}
				if (!this.formData.address) {
					uni.showToast({
						icon: "none",
						title: "请输入收件人地址"
					})
					return
				}


				uni.showModal({
					title: "提示",
					content: "确认提交吗？",
					success: async (res) => {
						if (res.confirm) {
							try {
								const requestData = {
									handlerPhone: this.phone,
									clientInfo: {
										name: this.formData.name,
										phone: this.formData.phone,
										address: this.formData.address,
									},
									remarks: this.formData.remarks,
									shopInfo: this.formData.shopData,
								}
								const {
									data
								} = await this.request("createOrder", requestData)

								uni.showToast({
									icon: "success",
									title: "创建订单成功",
									success() {
										uni.navigateBack()
									}
								})
							} catch (e) {
								console.log(e)
								uni.showToast({
									icon: "error",
									title: "创建订单失败",
								})
							}
						}
					}
				})

			},
			handleCancel() {
				uni.showModal({
					title: "提示",
					content: "是否取消创建订单",
					success(res) {
						if (res.confirm) uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.createOrder {
		padding: 15rpx 20rpx 50rpx;

		.combox {
			position: absolute;
			right: 0;
			top: 100rpx;
			z-index: 5000;
			display: flex;
			flex-direction: column;
			width: 50vw;
			height: 130px;
			box-shadow: 0 5rpx 15rpx 4rpx #666666;
			border-radius: 10rpx;
			background: #fff;
			overflow: auto;


			.comboxItem {
				display: flex;
				align-items: center;
				padding: 30rpx 10rpx;
				border-bottom: 1rpx solid #eee;
			}
		}
	}

	.cardWrap {
		position: relative;

		.deleteIcon {
			position: absolute;
			right: 40rpx;
			top: 15rpx;
			z-index: 3000;
		}
	}
</style>
